<template>
  <ul class="topNav">
    <li>
      <router-link to="/recommend">推荐音乐</router-link>
    </li>
     <li>
      <router-link to="/rank">排行榜</router-link>
    </li>
    <!-- <li>
      <router-link to="/hot">热歌榜</router-link>
    </li> -->
    <li>
      <router-link to="/search">搜索</router-link>
    </li>
  </ul>
</template>
<style lang="less" scoped>
  .topNav{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
    z-index: 1;
    background-color: white;
    li{
      flex: 1;
      line-height: 40px;
      text-align: center;
      a{
        display: inline-block;
        line-height: 40px;
        padding: 0 5px;
        font-size: 15px;
        color: #333;
        &.router-link-exact-active{
          color: #dd001b;
          // border-bottom: 2px solid #dd001b;
          position: relative;
          &::after{
            content: "";
            width: 100%;
            height: 2px;
            background-color: #dd001b;
            position: absolute;
            left: 0;
            bottom: -1px;
          }
        }
      }
    }
  }
</style>